<template>
	<view class="home">
		<view class="scrollNav">
			<scroll-view scroll-x="true" class="navscroll">
				<view class="item" :class="item.id==navIndex?'active':''" v-for="(item,index) in nav"
				 :key="item.id" @click="clickNav(item.id)">
					{{item.classname}}
				</view>
			</scroll-view>
		</view>
		<view class="content" v-if="data">
			<view class="row" v-for="item in data" :key="item.id">
				<newsbox @click.native="goDetail(item.id)" :item="item">
				</newsbox>
			</view>
		</view>
		<view class="none" v-if="data.length == 0">
			----该栏新闻暂时为空，请访问其他边栏----
		</view>
	</view>
</template>


<script>
import { request } from "../.././utils/request.js"
import { getCurrentDateTime } from "../.././utils/usetime.js"
	export default {
		data() {
			return {
				navIndex: 50,
				data:[],
				nav:[],
				currentPage:1
			}
		},
		onLoad(e) {
			this.requestXWLM()
			this.getCID()
		},
		onShow() {
			
		},
		onReachBottom() {
			// console.log("到底了")
			this.currentPage++
			this.requestXWLB(this.navIndex)
		},
		methods: {
			// 点击导航切换
			clickNav(id){
				this.navIndex = id
				this.data = []
				this.currentPage = 1
				this.requestXWLB(this.navIndex)
				uni.setStorage({
					key:'cid',
					data: id
				})
			},
			// 获取本地缓存的选中的列表的cid
			getCID(){
				uni.getStorage({
					key:'cid',
					// 这里是complete，如果是success的话，如果本地没有存储cid，那么不会调用success，页面会显示空
					complete: (res) => {
						if(res.data)
						{
							this.navIndex = res.data
						}
						// console.log(this.navIndex)
						// 需要在获取cid之后才执行requestXWLB()，因为是异步函数，不然小程序中有bug
						this.requestXWLB(this.navIndex)
					}
				})
			},
			// 跳转到详情页面
			goDetail(id){
				let looktime = getCurrentDateTime()
				// console.log(currentDateTime)
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${this.navIndex}&id=${id}&looktime=${looktime}`
				})
			},
			// 获取新闻栏目数据
			requestXWLM(){
				request({
				  url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
				  method: 'GET'
				})
				  .then((res) => {
				    // console.log(res)
					this.nav = res
				  })
				  .catch((err) => {
				    console.error(err)
				  })
			},
			// 获取新闻列表数据
			requestXWLB(cid){
				request({
				  url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
				  method: 'GET',
				  data: {
				      cid,
					  page: this.currentPage
				    }
				})
				  .then((res) => {
				    // console.log(res)
					this.data = [...this.data,...res]
					// console.log(this.data)
				  })
				  .catch((err) => {
				    console.error(err)
				  })
			}
		}
	}
</script>

<style lang="scss">
	.navscroll{
		height: 100rpx;
		background-color: #F7F8FA;
		white-space: nowrap;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 10;
		.item{
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
			color: #333;
			&.active{
				color: #31C27C;
			}
		}
		// 穿透样式，把h5的滚动条样式去除
		/deep/ ::-webkit-scrollbar {
				width: 4px !important;
				height: 1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;
			}
	}
	
	.content{
		padding:30rpx;
		padding-top: 100rpx;
		.row{
			border: 1px dotted #efefef;
			padding: 15rpx 0;
		}
	}
	
	.none{
		margin: 50rpx 30rpx;
		text-align: center;
		font-size: 30rpx;
		color: #999;
	}
</style>
